import React, { Component } from 'react'
import { findDOMNode } from 'react-dom';
import { Button, Tag } from 'antd'
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { connect } from 'umi'
import './tagsSelect.less'
@connect(({ music }) => ({
    music,
    ResetTags: music.ResetTags
}))
class TagsSelect extends Component {

    constructor(props) {
        super(props);
    }

    state = {
        curTag: 0,
        curItem: undefined,
        isShow: false
    }

    componentWillMount() {
        const { dispatch } = this.props;
        dispatch({
            type: 'music/getClassifyTags'
        })
    }

    componentDidMount() {
        document.addEventListener('mousedown', (e) => this.handleClickOutSide(e), false);
    }

    componentWillUnmount() {
        document.removeEventListener('mousedown', (e) => this.handleClickOutSide(e), false);
    }

    handleClickOutSide(e) { // 判断是否点击外部
        const target = e.target;
        if (this._tags_select) {
            let result = findDOMNode(this._tags_select).contains(e.target);
            if (!result) {
                this.setState({
                    isShow: false
                })
            }
        }
    }

    handleCloseTag = (e) => {
        this.setState({
            curTag: 0,
            isShow: false
        })
        this.props.onSelect({
            curTag: 0
        });
    }

    handleCheckTag = (item) => {
        this.setState({
            curTag: item.id,
            curItem: item,
            isShow: false
        })

        this.props.onSelect({
            curTag: item.id,
            curItem: item,
        });
    }

    render() {
        const { ResetTags, onSelect } = this.props;
        const { curTag, isShow, curItem } = this.state;
        return (
            <div className="tags-select" ref={e => this._tags_select = e}>
                <Button shape="round" icon={isShow ? <UpOutlined /> : <DownOutlined />} onClick={() => {
                    this.setState({
                        isShow: !isShow
                    })
                }}>
                    {curTag == 0 ? "全部" : curItem && curItem.name || "null"}
                </Button>
                {
                    isShow && <div className="tags-select-list">
                        <div className="select-list-title">
                            <Button type={curTag === 0 ? "primary" : ""} shape="round" size="small" onClick={() => {
                                this.setState({
                                    curTag: 0,
                                    isShow: false
                                })
                                onSelect({
                                    curTag: 0
                                });
                            }}>
                                全部
                            </Button>
                        </div>
                        {
                            ResetTags.length && ResetTags.map((item, index) => {
                                return <dl key={index}>
                                    <dt>{item.name}</dt>
                                    <dd>
                                        {
                                            item.tags.map((item, jndex) => {
                                                return curTag === item.id ?
                                                    <a key={jndex} >
                                                        <Tag color="var(--antd-wave-shadow-color)"
                                                            closable
                                                            onClose={e => {
                                                                e.preventDefault();
                                                                this.handleCloseTag();
                                                            }}
                                                        >{item.name}</Tag>
                                                    </a> :
                                                    <a key={jndex} onClick={e => this.handleCheckTag(item)}>{item.name}</a>
                                            })
                                        }
                                    </dd>
                                </dl>
                            })
                        }
                    </div>
                }
            </div>
        );
    }
}

export default TagsSelect